<template>
  <div class="app-container">
    <ListTab v-if="!showMobilePage" :show-header="true" />
    <div :class="{'mobile-table mobile-pt mobile-min-height':showMobilePage}" class="product-container min-fill-page">
      <div v-if="!showMobilePage" style="position:relative;margin-bottom:16px;">
        <FilterInput
          v-model="filterInput"
          :filter-list="filterList"
          :is-show-filter="isShowFilter"
          show-search-btn
          is-show-config
          class="FilterTool"
          @handelClick="queryClick"
          @queryEmpty="queryEmpty"
          @filterTagStatus="filterTagStatus"/>
        <div class="opeator-bar btn-right">
          <ImportButton
            v-if="canImport"
            :import-api="'/admin/youzan/goods/upload'"
            :get-list="getData"
            :extend-params="{url: ''}"
            :show-icon="false"
            is-diy
            btn-text="导入商品"
            style="margin-right:16px;"
            accept=".csv,.xls,.xlsx"
            type="uploadFile" >
            <el-button class="more-button" size="small">导入商品</el-button>
          </ImportButton>
          <btnGroup
            ref="btnGroupRef"
            :list="[
              {label:'下载', exportApi:'/admin/commerce/productManage/edit/temple', exportName:'导入模板', isBeforeExport: false, type: 'export'},
            ]"
          >
            <ImportButton
              v-if="canEdit"
              :import-api="'/admin/youzan/supply/import'"
              :get-list="getData"
              :extend-params="{url: ''}"
              :show-icon="false"
              is-diy
              btn-text="批量变更"
              accept=".csv,.xls,.xlsx"
              type="uploadFile">
              <div class="change-text">变更</div>
            </ImportButton>
          </btnGroup>

        </div>
      </div>
      <div v-loading="listLoading" style="min-height: 300px">
        <u-table
          v-if="listData.items.length > 0"
          :data="listData.items"
          :ref="tableRefName"
          :row-class-name="tableRowClassName"
          :border="true"
          :row-height="rowHeight()"
          :height="setTableHeight"
          beautify-table
          header-drag-style
          use-virtual
          class="fb-table"
          element-loading-text="加载中..."
          empty-text="暂无数据"
          header-cell-class-name="order-data-header-cell"
          fit
          hightlight-current-row
          @select="selectTable"
          @select-all="selectTable"
          @sort-change="sortMethod">
          <u-table-column
            align="center"
            type="selection"
            width="50"
            fixed="left" />
          <u-table-column
            v-for="(titleItem, tIndex) in listData.titles"
            :key="titleItem + tIndex"
            :label="titleItem"
            :prop="titleItem"
            :fixed="titleItem === '操作' || (!showMobilePage && titleItem === '商品状态') ? 'right' : false"
            :min-width="setWidth(titleItem)"
            :width="titleItem === '_id'? 1 : 'auto' "
            :sortable="canSort(titleItem) ? 'custom' : false"
            :class-name="titleItem === '_id'? 'display-none' : '' "
            :align="includesPriceField(titleItem)?'right':'left'"
          >
            <template slot-scope="scope">
              <div v-if="scope.column.label === '供货价（人工）' || scope.column.label === '供货价(人工)'" class="edit-area price-div" @mouseover="changeActivedPriceId(scope.row[getTitleIndex('规格id')])" @mouseout="changeActivedPriceId('')">
                <span style="flex:1;"/>
                <img v-show="scope.row[getTitleIndex('规格id')] && (''+scope.row[getTitleIndex('规格id')]).trim() && activedPriceId === scope.row[getTitleIndex('规格id')] && canEdit" :src="editIcon" alt="crm" class="edit-icon mr5" @click.stop="changeGoodsInfo(scope.row)">
                <PriceColumn :real-val="scope.row[tIndex]" :price="Number(scope.row[tIndex])" />
              </div>
              <div v-else-if="scope.column.label === '商品归属-人工'" class="edit-area goods-type" @mouseover="changeActivedPriceId(scope.row[getTitleIndex('规格id')], 2)" @mouseout="changeActivedPriceId('', 2)">
                <div v-if="scope.row[tIndex]" class="text-wrap"> {{ scope.row[tIndex] }}</div>
                <div v-else class="text-wrap">--</div>
                <img v-show="scope.row[getTitleIndex('规格id')] && (''+scope.row[getTitleIndex('规格id')]).trim() && activedBelongId === scope.row[getTitleIndex('规格id')] && canEdit" :src="editIcon" alt="crm" class="edit-icon" @click="changeGoodsInfo(scope.row)">
              </div>
              <div v-else-if="scope.column.label === '供应商名称'" class="edit-area width-100-precent" @mouseover="changeActivedPriceId(scope.row[getTitleIndex('规格id')], 3)" @mouseout="changeActivedPriceId('', 3)">
                <el-tooltip v-if="(scope.row[tIndex] || scope.row[tIndex] === 0) && scope.row[tIndex] !== ' '" placement="top">
                  <div slot="content" class="max-width-300">{{ scope.row[tIndex] }}</div>
                  <div class="overflow text-wrap" >{{ scope.row[tIndex] }}</div>
                </el-tooltip>
                <div v-else class="text-wrap">--</div>
                <img v-show="scope.row[getTitleIndex('规格id')] && (''+scope.row[getTitleIndex('规格id')]).trim() && activedSupplierId === scope.row[getTitleIndex('规格id')] && canEdit" :src="editIcon" alt="crm" class="edit-icon" @click="changeGoodsInfo(scope.row)">
              </div>
              <div v-else-if="includesPriceField(titleItem)" class="price-div">
                <PriceColumn :real-val="scope.row[tIndex]" :price="Number(scope.row[tIndex])" />
              </div>
              <div v-else-if="scope.column.label === '是否签约'" class="edit-area width-100-precent" @mouseover="changeActivedPriceId(scope.row[getTitleIndex('规格id')], 3)" @mouseout="changeActivedPriceId('', 3)">
                <span :class="{'red-bg': scope.row[tIndex] === '否', 'green-bg': scope.row[tIndex] === '是'}" class="bg-text">{{ scope.row[tIndex] || '--' }}</span>
              </div>
              <div v-else-if="scope.column.label === '操作'" style="display:flex;">
                <div v-if="scope.row[getTitleIndex('规格id')] && (''+scope.row[getTitleIndex('规格id')]).trim() && canEdit" class="button-text border-right" @click="changeGoodsInfo(scope.row)">变更</div>
                <el-dropdown trigger="click">
                  <div class="button-text" style="display:flex;align-items:center;">更多<i class="el-icon-arrow-down"/></div>
                  <el-dropdown-menu
                    slot="dropdown"
                    class="dropdown-wrap">
                    <el-dropdown-item @click.native="showLogs(scope.row)">
                      <div>记录</div>
                    </el-dropdown-item>
                    <el-dropdown-item v-if="canEdit" @click.native="goodsBatchStatus(scope.row[getTitleIndex('商品状态')], scope.row[getTitleIndex('_id')])">
                      <div>{{ scope.row[getTitleIndex('商品状态')] === '无效' || !scope.row[getTitleIndex('商品状态')]? '激活' : '设置无效' }}</div>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
              <div v-else class="width-100-precent">
                <template v-if="scope.column.label === '商品状态'">
                  <span :class="scope.row[tIndex] === '无效' ? 'red-dot' : 'green-dot'" class="dot" />
                </template>
                <el-tooltip v-if="(scope.row[tIndex] || scope.row[tIndex] === 0) && scope.row[tIndex] !== ' '" placement="top">
                  <div slot="content" class="max-width-300">{{ scope.row[tIndex] }}</div>
                  <div class="overflow text-wrap" >{{ scope.row[tIndex] }}</div>
                </el-tooltip>
                <div v-else>--</div>
              </div>
            </template>
          </u-table-column>
        </u-table>
        <empty-placeholder v-else-if="!isInit" style="margin-bottom: 24px" />
      </div>
      <el-row v-if="showMobilePage" type="flex" justify="left">
        <SelectionNum :select-item="multipleSelectionAll" @clearMixinSelection="clearMixinSelection" />
        <el-pagination
          v-show="listData.total > 0"
          :current-page="listData.page"
          :page-size="listData.perPage"
          :total="listData.total"
          :page-sizes="[20, 50, 100, 250, 500]"
          :layout="pageLayout"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </el-row>
      <fixed-pagination v-show="listData.total > 0 && !showMobilePage || showMobilePage" class="pagination-area">
        <template v-if="showMobilePage">
          <FilterInput
            v-model="filterInput"
            :filter-list="filterList"
            :is-show-filter="isShowFilter"
            show-search-btn
            show-mobile-icon
            class="FilterTool"
            @handelClick="queryClick"
            @queryEmpty="queryEmpty"
            @filterTagStatus="filterTagStatus"/>

          <MoreOpeator
            ref="moreOpeatorRef"
            :list="[
              {label: '导入商品', type:'import', callback: getData, importApi:'admin/youzan/goods/upload', uploadType: 'uploadFile', auth: canImport},
              {
                label: '批量变更', type:'import', callback: getData,
                accept:'.csv,.xls,.xlsx',
                extendParams: {url: ''},
                importApi:'/admin/youzan/supply/import',
                uploadType: 'uploadFile', auth: canEdit
              },
              {label: '导入模板下载', type: 'export', exportApi:'admin/commerce/productManage/edit/temple', exportName:'导入模板'},
              {label: '导出商品', type: 'export', httpMethod:'post', exportApi:'admin/commerce/productManage/export', exportName:'导出商品',isBeforeExport:true, beforeExport: goodsListBeforeExport, refName:'goodsListExport', auth: canExport},
              {label: '激活', handelClick: () => {goodsBatchStatus('无效')}, auth: canEdit},
              {label: '设置无效', handelClick: () => {goodsBatchStatus('激活')}, auth: canEdit},
            ]"
            show-mobile-icon
          />
        </template>
        <template v-else>
          <div class="button-container">
            <MoreOpeator
              v-if="canExport || canEdit"
              ref="moreOpeatorRef"
              :list="[
                {label: '导出商品', type: 'export', httpMethod:'post', exportApi:'admin/commerce/productManage/export', exportName:'导出商品',isBeforeExport:true, beforeExport: goodsListBeforeExport, refName:'goodsListExport', auth: canExport},
                {label: '激活', handelClick: () => {goodsBatchStatus('无效')}, auth: canEdit},
                {label: '设置无效', handelClick: () => {goodsBatchStatus('激活')}, auth: canEdit},
              ]"
              label="批量操作"
            />
          </div>
          <SelectionNum :select-item="multipleSelectionAll" style="margin-left:5px;flex:1;" @clearMixinSelection="clearMixinSelection" />
          <el-pagination
            :current-page="listData.page"
            :page-size="listData.perPage"
            :total="listData.total"
            :page-sizes="[20, 50, 100, 250, 500]"
            layout="total, prev, pager, next, sizes, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </template>
      </fixed-pagination>
    </div>
    <addDialog :dialog-form-visible="dialogFormVisible" :is-mobile="showMobilePage" @close="closeDialog" @success="handleSuccess"/>
    <ChangeGoodsInfoDialog :dialog-form-visible="dialogGoodsInfoVisible" :is-mobile="showMobilePage" :specification-code-id="specificationCodeId" :data="goodsItemData" @close="closeDialog(1)" @success="handleSuccess(1)"/>
    <LogsDialog
      :dialog-form-visible="dialogLogsVisible"
      :specification-code-id="specificationCodeId"
      :goods-id="goodsId"
      :is-mobile="showMobilePage"
      @close="closeDialog(2)"/>
  </div>
</template>

<script>
// components
import Title from '@/components/Title';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import ImportButton from './model/ImportBtn';
import ExportButton from '@/components/ExportButton';
import addDialog from './model/addDialog';
import ChangeGoodsInfoDialog from './model/changeGoodsInfoDialog';
import LogsDialog from './model/logsDialog';
import ListTab from '@/components/ListTab';
import btnGroup from '@/components/Common/baseComponent/btnGroup';
import MoreOpeator from '@/components/Common/baseComponent/moreOpeator';
// api
import { getProductList, goodsStatusEdit } from '@/api/commerce';
// tool
import { format } from '@/filters/date';
import { hasRouteAuth } from '@/utils/permission';
import { moneyFilter, numberTextFormat } from '@/filters/number';
import { isNumber } from '@/utils/tools';
import { standardFormat } from '@/filters/date';
import TableAdaptive from '@/mixins/tableAdaptive';
import { showModal } from '@/utils/message';
// img
import setting from '@/assets/setting.png';
import editIcon from '@/assets/edit.png';

import { mapState } from 'vuex';
import axios from 'axios';
// 跨页选中逻辑
import tableSelections from '@/mixins/tableSelections';
import mobileTable from '@/mixins/mobileTable';
/**
 * getTitleIndex 根据 标题 获取 listData中的 title的索引 用来获取对应数据 ， 所以 已和产品约定好title名称不能
 * **/
export default {
  filters: {
    format,
    moneyFilter,
    standardFormat,
    tableDatafilter(val) {
      if (!isNumber(val)) {
        return val || '--';
      } else {
        return moneyFilter(numberTextFormat(val, 1), false);
      }
    }
  },
  components: {
    Title,
    EmptyPlaceholder,
    ImportButton,
    ExportButton,
    addDialog,
    ChangeGoodsInfoDialog,
    LogsDialog,
    ListTab, MoreOpeator, btnGroup
  },
  mixins: [tableSelections, TableAdaptive, mobileTable],
  data() {
    return {
      isUmyTable: true,
      setting,
      editIcon,
      isInit: true,
      activedPriceId: '',
      activedBelongId: '',
      specificationCode: '',
      specificationCodeId: '',
      goodsId: '',
      activedSupplierId: 0,
      listLoading: false,
      listData: {
        items: []
      },
      page: 1,
      perPage: 20,
      priceTableData: [],
      goodsItemData: {},
      priceTableDataCache: {},
      priceLoading: false,
      dialogFormVisible: false,
      dialogGoodsInfoVisible: false,
      dialogLogsVisible: false,
      isShowFilter: false,
      filterInput: {
        supplierName: ''
      },
      filterList: [
        { keyword: 'goodsName', name: '商品名称', type: 'input' },
        { keyword: 'supplierName', name: '供应商名称', type: 'input' },
        { keyword: 'supplierNum', name: '供应商序号', type: 'input' },
        { keyword: 'specificationCode', name: '规格编码', type: 'input' },
        { keyword: 'specificationId', name: '规格id', type: 'input' },
        { keyword: 'goodsSpecification', name: '商品规格', type: 'input' },
        { keyword: 'goodsId', name: '商品id', type: 'input' },
        { keyword: 'goodsCode', name: '商品编码', type: 'input' },
        { keyword: 'goodsType', name: '商品类型', type: 'select', options: [
          { value: '普通商品', label: '普通商品' },
          { value: '分销商品', label: '分销商品' }
        ] },
        { keyword: 'goodsBelong', name: '商品归属', type: 'select', options: [
          { value: '采销型', label: '采销型' },
          { value: '服务型', label: '服务型' }
        ] },
        { keyword: 'isSign', name: '是否签约', type: 'select', options: [
          { value: 1, label: '是' },
          { value: 0, label: '否' }] }
        // { keyword: 'goodsStatus', name: '商品状态', labelWidth: '82px', type: 'select', options: [
        //   { value: '无效', label: '无效' },
        //   { value: '有效', label: '有效' }
        // ] }
      ],
      uploadParams: {},
      tableRefName: 'goodsTableRef', // 表格的ref名称
      idKey: 13, // 唯一表示字段
      ids: '',
      selectList: [], // 列表已选字段
      sortType: '',
      sortName: '',
      cancelToken: null
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo
    }),
    isAdmin() {
      return this.userInfo.userName === '管理员';
    },
    canEdit() {
      return hasRouteAuth('crm:goodsList:edit') || this.isAdmin;
    },
    canImport() {
      return hasRouteAuth('crm:goodsList:import') || this.isAdmin;
    },
    canExport() {
      return hasRouteAuth('crm:goodsList:export') || this.isAdmin;
    },
    tableOutsideHeight() {
      return this.showMobilePage ? 158 : 188;
    }
  },
  created() {
    const { supplierName } = this.$route.query;
    if (supplierName) {
      this.filterInput.supplierName = supplierName;
      this.isShowFilter = true;
    }
    this.getData();
  },
  methods: {
    hasRouteAuth,
    // 通过标题名称获取索引
    getTitleIndex(title) {
      const index = this.listData.titles.indexOf(title);
      if (index >= 0) {
        return index;
      }
    },
    setWidth(titleItem) {
      const map = {
        '商品名称': 220, '供应商名称': 220, '操作': 110, '商品状态': 80,
        '供货价（人工）': 170, '供货价(人工)': 170, '预估毛利（元）': 170,
        '商品实际成交金额': 170, '商品已退款金额': 150, '运费': 100,
        '最高零售价（元）': 140, '最低零售价（元）': 140
      };
      return map[titleItem] || 150;
    },
    queryClick(a) {
      this.sortType = '';
      this.sortName = '';
      if (this.$refs[this.tableRefName]) {
        this.$refs[this.tableRefName].clearSort();
      }
      this.getData(true);
    },
    queryEmpty() {
      this.filterInput = {};
      this.isShowFilter = false;
      this.queryClick();
    },
    // type: 1 变更信息的弹窗；type: 2 变更记录的弹窗
    closeDialog(type) {
      if (type === 1) {
        this.dialogGoodsInfoVisible = false;
        return false;
      } else if (type === 2) {
        this.dialogLogsVisible = false;
        return false;
      }
      this.dialogFormVisible = false;
    },
    handleSuccess(type) {
      if (type) {
        this.dialogGoodsInfoVisible = false;
        this.getData();
        return false;
      }
      this.dialogFormVisible = false;
      this.priceTableDataCache = {};
      this.getData(true);
    },
    getData(reset = false) {
      if (reset) this.page = 1;
      this.listLoading = true;
      const params = JSON.parse(JSON.stringify(this.filterInput));
      params.page = this.page;
      params.perPage = this.perPage;
      if (this.sortType) params.sortType = this.sortType;
      if (this.sortName) params.sortName = this.sortName;
      this.uploadParams = params;
      if (this.cancelToken) this.cancelToken.cancel('cancel');
      const source = axios.CancelToken.source();
      this.cancelToken = source;
      getProductList(params, source.token).then(res => {
        this.isInit = false;
        this.listLoading = false;
        if (res.code === 200) {
          res.data.titles.push('操作');
          this.listData = res.data;
          this.idKey = this.getTitleIndex('规格id');
          if (this.setSelectRow) this.setSelectRow(this.listData.items);
        }
      }).catch(e => {
        if (!this.isInit || e.message !== 'cancel') {
          this.listLoading = false;
        }
        this.isInit = false;
      });
    },
    handleSizeChange(val) {
      this.perPage = val;
      this.getData(true);
    },
    handleCurrentChange(toPage) {
      this.page = toPage;
      this.getData();
    },
    // 展示编辑按钮
    changeActivedPriceId(id, type = 1) { // 1: 供货价的编辑按钮； 2: 商品归属的编辑按钮 3:供应商名称按钮
      if (type === 1) {
        this.activedPriceId = id;
        return false;
      } else if (type === 3) {
        this.activedSupplierId = id;
        return false;
      }
      this.activedBelongId = id;
    },
    // 变更商品信息
    changeGoodsInfo(item = []) {
      this.specificationCodeId = item[this.getTitleIndex('规格id')].toString(); // 规格id
      this.goodsItemData.goodsBelong = item[this.getTitleIndex('商品归属-人工')]; // 商品归属-工人
      this.goodsItemData.supplierNum = item[this.getTitleIndex('供应商序号')]; // 供应商序号
      this.goodsItemData.supplierName = item[this.getTitleIndex('供应商名称')]; // 供应商名称
      this.goodsItemData.price = item[this.getTitleIndex('供货价（人工）')]; // 供货价-人工（元）
      this.goodsItemData.goodsId = item[this.getTitleIndex('商品id')]; // 商品id
      this.dialogGoodsInfoVisible = true;
    },
    // 展示变更记录弹窗
    showLogs(item = []) {
      const specificationCodeIdIndex = this.getTitleIndex('规格id');
      this.goodsId = item[this.getTitleIndex('商品id')];
      this.specificationCodeId = item[specificationCodeIdIndex].toString();
      this.dialogLogsVisible = true;
    },
    // 导出商品
    goodsListBeforeExport() {
      this.uploadParams._ids = this.ids;
      if (this.$refs.moreOpeatorRef) {
        this.$refs.moreOpeatorRef.btnExport(this.uploadParams, 'goodsListExport');
      }
    },
    // 批量修改商品状态
    goodsBatchStatus(status, id = '') {
      const statusIndex = this.getTitleIndex('商品状态');
      const statusCode = status === '无效' || !status ? 1 : 0;
      const text = status === '无效' || !status ? '有效' : '无效';
      if (!id && !this.ids) {
        this.$message.warning(`请勾选需要${statusCode ? '激活' : '设置无效'}的商品`);
        return false;
      }
      if (!id && this.selectList.find(i => i[statusIndex] === text)) {
        this.$message.warning(`所选商品包含${text}商品，请重新选择`);
        return false;
      }
      showModal(
        `请确认是否${id ? '' : '批量'}${statusCode ? '激活' : '设置无效'}？`,
        '',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          center: true,
          type: 'warning',
          customClass: ' del-message del-message-cancel',
          iconClass: 'del-icon'
        }
      ).then(async() => {
        try {
          const data = { status: statusCode, _ids: id || this.ids };
          const result = await goodsStatusEdit(data);
          const { code, message } = result;
          if (code === 501) {
            this.$message.error(message);
            return false;
          }
          // 操作成功清除选项
          this.clearMixinSelection();
          this.$message.success('操作成功');
          this.getData();
        } catch (error) {
          console.log(error);
        }
      }).catch(() => {});
    },
    // 多选
    tableSelectionChange(e) {
      this.selectList = e;
      const _idIndex = this.getTitleIndex('_id');
      this.ids = e.map(i => i[_idIndex]).join(',');
    },
    // 排序
    sortMethod(a) {
      if (a.order) {
        this.sortType = a.order === 'ascending' ? 1 : -1;
        this.sortName = a.prop;
      } else {
        this.sortType = '';
        this.sortName = '';
      }
      this.getData(true);
    },
    canSort(prop) { // 需要排序的项
      const arr = [
        '供货价（人工）', '预估毛利（元）', '预估毛利率', '价格（元）',
        '库存', '累计销量', '创建时间', '供货价（元）', '成本价（元）'
      ];
      return arr.includes(prop);
    },
    includesPriceField(filed) {
      return ['元', '价', '费'].some(i => filed.includes(i));
    }
  }
};
</script>

<style lang="scss" scoped>
.border-right {
  display: block;
  position: relative;
  padding-right:6px;
  margin-right: 6px;
  &::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -7px;
    width: 1px;
    background: #ddd;
    height: 14px;
  }
}
.product-container {
  margin: 16px 16px 0 16px;
  background-color: #fff;
  padding: 20px 24px 55px 24px;
  ::v-deep {
    .btn-right {
      .el-button--primary, .meidum-export-btn {
        border-radius: 4px;
        border: none;
        padding: 7px 12px;
        height: 32px;
        background: #eff3fb;
        color: #406eff;
        font-weight: 550;
      }
      .meidum-export-btn {
        display: inline-block;
        box-sizing: border-box;
        white-space: nowrap;
        cursor: pointer;
        margin: 4px 20px 0 0;
        font-size: 14px;
        line-height: 18px;
      }
    }
  .batch-set {
    padding: 7px 12px;
    font-size: 14px;
    background: #406eff;
    border-color: #406eff;
    color: #fff;
    height: 32px;
  }
  .display-none .cell {
    max-width: 1px;
    max-height: 20px;
    overflow: hidden;
  }
  }
}
.btn-right {
    display: flex;
    align-items: center;
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
}
.overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropdown-wrap {
  margin-top: -24px;
  margin-right: 15px;
  padding: 0;
  .el-dropdown-menu__item {
    width: 100px;
    text-align: center;
  }
}
.edit-area {
  display: flex;
  align-items: center;
  .edit-icon {
    padding-bottom: 2px;
    cursor: pointer;
  }
}
.goods-type {
  justify-content: flex-start;
}
.text-wrap {
  display: inline-block;
  padding-right: 8px;
  max-width: 100%;
}
.dot{
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin-right: 5px;
  margin-top: 10px;
}
.red-dot {
  background-color: #FF4E5F;
}
.green-dot {
  background-color: #31CC9C;
}
.max-width-300 {
  max-width: 300px;
}
.width-100-precent {
  width: 100%;
  display: flex;
}
.price {
  min-height: 100px;
  max-width: 300px;
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
}
.more-button {
  width: 96px;
  padding: 0;
  height: 32px;
  border: 1px solid #DDDDDD;
  border-radius: 4px;
  color: #666666;
  background: #fff;

}
.change-text {
  padding: 0 10px;
  color: #666 !important;
}
.price-div {
  padding-right: 0;
}
.bg-text {
  // width: 64px;
  height: 20px;
  padding: 0 6px;
  line-height: 20px;
  border-radius: 10px;
  font-size: 12px;
  text-align: center;
}
.green-bg {
  background: #e2f8f2;
  color: #31cc9c;
}
.red-bg {
  background: #F8E2E2;
  color: #FF4E5F;
}
</style>
<style lang="scss">
.el-dropdown-menu-batch-set.goods-dropdown {
  margin-bottom: 5px;
  padding: 0;
  .el-dropdown-menu__item {
    padding: 0 10px;
    min-width: 100px;
    text-align: center;
  }
  .meidum-export-btn {
    margin-right: 0px;
    height: 36px;
    color: inherit;
    background: none;
  }
}
</style>

